<template>
  <div class="step-a">
    <el-select
      v-model="value"
      clearable
      placeholder="请选择车管所"
      @change="changeValue(value)"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.label"
      />
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'StepA',
  model: {
    prop: 'dmv',
    event: 'selectedChange'
  },
  data() {
    return {
      value: '',
      options: [
        {
          value: '选项1',
          label: '南昌交管局车管所'
        },
        {
          value: '选项2',
          label: '赣州交管局车管所'
        },
        {
          value: '选项3',
          label: '宜春交管局车管所'
        },
        {
          value: '选项4',
          label: '吉安交管局车管所'
        },
        {
          value: '选项5',
          label: '抚州交管局车管所'
        },
        {
          value: '选项6',
          label: '上饶交管局车管所'
        },
        {
          value: '选项7',
          label: '九江交管局车管所'
        },
        {
          value: '选项8',
          label: '鹰潭交管局车管所'
        },
        {
          value: '选项9',
          label: '景德镇交管局车管所'
        },
        {
          value: '选项10',
          label: '新余交管局车管所'
        },
        {
          value: '选项11',
          label: '萍乡交管局车管所'
        }
      ]
    }
  },
  methods: {
    changeValue(vaule) {
      this.$emit('selectedChange', vaule)
    }
  }
}
</script>

<style scoped>
.step-a {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
